<!doctype html>
<head>
	<title>Box Shadow Generator | CSS3 Generator | CSS3Gen</title>
	<link rel="shortcut icon" href="http://under-88.blogspot.com/favicon.ico">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/box-shadow.css">
	<link  href="//fonts.googleapis.com/css?family=Calligraffitti:regular" rel="stylesheet" type="text/css" >
	<link  href="//fonts.googleapis.com/css?family=Lobster:regular" rel="stylesheet" type="text/css" >
	<script src="https://css3-tutsplus.googlecode.com/svn/trunk/css-generator/js/modern-1.6.min.js"></script>
</head>
<body>
	<div id="container">
<div id="main">
		<div class="title_text">
			<h1>CSS3 Box Shadow Generator</h1>
			<div class="error_msg modernizr_boxshadow_test">
				Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won&#39;t be able to see the results.
			</div>
			<noscript>
				<div class="error_msg">Please enable Javascript to use this page.</div>
			</noscript>

		</div>


		<div id="box_shadow"></div>


		<div id="input">

			<form action="">

				<div class="control">
					<div id="angle_slider" class="controller knob_control">|</div>
					<div class="form_input">
						<label for="angle">Angle: </label>
						<input type="text" name="angle" id="angle" value="45" class="auto_update" />deg
					</div>
				</div>

				<div class="control">
					<div id="distance_slider" class="controller slider">
						<div class="slider_container">
							<div class="slider_button" id="distance_sider_button"></div>
						</div>
					</div>
					<div class="form_input">
						<label for="distance">Distance: </label>
						<input type="text" name="distance" id="distance" value="3" class="auto_update" />px
					</div>
				</div>

				<div class="control">
					<div id="blur_slider" class="controller slider">
						<div class="slider_container">
							<div class="slider_button" id="blur_sider_button"></div>
						</div>
					</div>
					<div class="form_input">
						<label for="blur">Blur: </label>
						<input type="text" name="blur" id="blur" value="1" class="auto_update" />px
					</div>
				</div>

				<div class="control">
					<div id="colour_picker" class="controller colour_picker">
						<span class="slider_label">r</span>
						<div class="slider_container nth_slider">
							<div class="slider_button" id="r_sider_button"></div>
						</div>
						<div class="clearfix"></div>

						<span class="slider_label">g</span>
						<div class="slider_container nth_slider">
							<div class="slider_button" id="g_sider_button"></div>
						</div>
						<div class="clearfix"></div>

						<span class="slider_label">b</span>
						<div class="slider_container nth_slider">
							<div class="slider_button" id="b_sider_button"></div>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="form_input">
						<label for="colour">rgb: </label>
						<input type="text" name="colour" id="colour" value="#CCC" class="auto_update" />
					</div>
				</div>
				<div class="control">
					<div id="opacity_slider" class="controller slider">
						<div class="slider_container">
							<div class="slider_button" id="opacity_sider_button"></div>
						</div>
					</div>
					<div class="form_input">
						<label for="opacity">Opacity: </label>
						<input type="text" name="opacity" id="opacity" value="1" class="auto_update" />
					</div>
				</div>
				<div class="clearfix"></div>
			</form>
		</div>
		<div id="results">
			<textarea id="output" readonly="readonly" cols="40" rows="4"></textarea>
								<div id="bsap_1267519" class="bsarocks bsap_538bd93f9e5d61dc43e92588ed098d4c"></div>
		</div>
</div>
	</div>
<script src="https://css3-tutsplus.googlecode.com/svn/trunk/css-generator/js/jquery-1.4.2.js" type="text/javascript"></script>
			<script src="https://css3-tutsplus.googlecode.com/svn/trunk/css-generator/js/box_shadow.js" type="text/javascript"></script>
</body>
</html>